<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            width: 250px;
            height: 250px;
            border: 1px solid #ccc;
            overflow-y: scroll;
            margin-top: 30px;
            color: red;
        }
        .left{
            height: 1000px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top" id="zz">
            普通滚动
            <div class="left"></div>
        </div>
        <div class="top" id="debounce">
            函数防抖
            <div class="left"></div>
        </div>
        <div class="top" id="throttle">
            函数节流
            <div class="left"></div>
        </div>
    </div>
</body>
<script>
// 防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将
// 多次执行变成每隔一段事件执行
// 函数防抖一定连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行
// 一次。

    document.getElementById("zz").onscroll=function(){
        console.log("这是普通滚动");
    }

    //函数防抖
    // 函数防抖debounce（dai bu ang si）是某一段时间内只执行一次
    var timer = null;
    document.getElementById("debounce").onscroll=function(){
        clearTimeout(timer)//清除未执行的代码
        timer=setTimeout(function(){
            console.log("这是函数防抖");
        },300)
    }
    //应用场景:表单搜索联想，用户在不断输入值时，用防抖来节约请求资源。
    //        window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次


        // 函数节流
        // 函数节流throttle (for 口)让函数间隔一段时间执行
        var jl = true;
        document.getElementById("throttle").onscroll = function(){
            if(!jl){
                // 判断是否已空闲，如果在执行中，则直接return
                return;
            }
             jl= false;
            setTimeout(function(){
                console.log("这是函数节流");
                jl = true;
            }, 300);
}
	// 应用场景:拖拽事件，每拖动1px都会触发onmousemove（可以用throttle优化，每秒触发一次）
     //         监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
</script>
</html>